<template>
  <div>
    <div>
      <el-steps :active="stbs" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商量logo"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </div>

    <div>
      <el-tabs v-model="stbs" tab-position="left" @tab-click="tabPro($event)">
        <el-tab-pane label="基本信息" name="1">
          <!-- <div class="proform"> -->
          <el-form ref="formRef" :model="form" label-width="120px">
            <el-form-item label="商品名:">
              <el-input
                v-model="form.goodsName"
                placeholder="商品名格式:品牌名 商品特征简要描述"
              ></el-input>
            </el-form-item>
            <el-form-item label="价格(元):">
              <el-input v-model="form.goodsPrice"></el-input>
            </el-form-item>
            <el-form-item label="重量(克):">
              <el-input v-model="form.goodsWeight"></el-input>
            </el-form-item>
            <el-form-item label="数量:">
              <el-input v-model="form.goodsNumber"></el-input>
            </el-form-item>
            <el-form-item label="分类:">
              <el-cascader
                v-model="value"
                :options="options"
                :props="props"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-form>
          <!-- </div> -->
        </el-tab-pane>
        <el-tab-pane label="商品属性" name="2">Config</el-tab-pane>
        <el-tab-pane label="商品logo" name="3">
          <el-upload
            class="avatar-uploader"
            :headers="headersCofing"
            :data="{ folder: 'product', isResize: '2' }"
            name="file"
            :limit="1"
            action="/api/upload/image"
            :auto-upload="true"
            list-type="picture-card"
            :on-success="handleAvatarSuccessOne"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品图片" name="4">
          <el-upload
            class="avatar-uploader"
            :headers="headersCofing"
            :data="{ folder: 'product', isResize: '2' }"
            name="file"
            :limit="1"
            action="/api/upload/image"
            :auto-upload="true"
            list-type="picture-card"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="5">
          <div>
            <QuillEditor ref="fuwenb" theme="snow"  />

            <el-button type="primary" @click="AddProduct()">添加</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, getCurrentInstance, reactive, ref } from "vue";
// import { request } from "@/network/request";
import httpRequest from '../service';

import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { Plus } from "@element-plus/icons-vue";
import type { UploadFile } from "element-plus/es/components/upload/src/upload.type";
import { ElMessage, ElMessageBox } from "element-plus";

import { useRoute, useRouter } from "vue-router";
const dialogImageUrl = ref("");
const dialogVisible = ref(false);

let page = {
  pageNo: 1,
  pageSize: 10,
  cateName: "",
};
const stbs = ref("1");
const value = ref([]);
const options = ref([]);
const fenlId = ref("");
const headersCofing = ref<any>("");
const goodsSmallLogo = ref<any>([])
const pics = ref<any>([])
const fuwenb = ref<any>('')
const goodsDesc = ref<any>('')
onMounted(() => {
  getlevel()
  // let token = localStorage.getItem("token");
  // headersCofing.value = { Authorization: "Bearer " + token };
    let token = window.sessionStorage.getItem("token");
  headersCofing.value = { Authorization: token };
});
const handleAvatarSuccess = (res: any, fileList: UploadFile[]) => {
  let data = res.data
  goodsSmallLogo.value.push(data)
    // let {path} = 
};

const handleAvatarSuccessOne = (res: any, file: UploadFile) => {
  pics.value.push(res.data)
  // imageUrl.value = URL.createObjectURL(file.raw);
};
// 分
const form = reactive({
  goodsName: "",
  goodsPrice: "",
  goodsWeight: "",
  goodsNumber: "",
  goodsCate:"",
  dynamicParam: [{ attrId: 46, attrValue: "阿三的短发", attrName: "茶叶" }],
  // goodsSmallLogo: { name: "", path: "" },
  // goodsDesc: "",
  // pics: [],
});

const handleChange = (change:any) => {
  
  form.goodsCate = Array.from(new Set(change)).join("_");
  
};

const router = useRouter();
const AddProduct = () => {
  goodsDesc.value = fuwenb.value.$refs.editor.innerText
  console.log(fuwenb.value.$refs.editor.innerText)
   httpRequest.request({ url: "/goods/addgoods",method: 'post', data: {...form,...pics,...goodsSmallLogo} }).then(
    (res: any) => {
      ElMessage({
        message: "添加成功",
        type: "success",
      });
    }
  );
  
router.push("/listgoods");
}



const getlevel = async () => {
  let ssas: any = [];
  await httpRequest.request({ url: "/goodscategory/gethaschildren",method: 'post', data: page }).then(
    (res: any) => {
      // productTableData.value = res.data.data.rows;
      page.pageSize = res.data.count;
    }
  );

 httpRequest. request({ url: "/goodscategory/gethaschildren",method: 'post', data: page }).then(
    (res: any) => {
      console.log(res)
      let op = res.data.rows;
      for (let index = 0; index < op.length; index++) {
        if ("children" in op[index]) {
          let s = {
            value: op[index].id,
            label: op[index].cateName,
            children: [],
          };
          ds(op[index].children, s.children);
          ssas.push(s);
        }
      }

      options.value = ssas;
    }
  );
};

// 递归三级联动
const ds = (sd: any, schid: any) => {
  let s;
  for (let index = 0; index < sd.length; index++) {
    if ("children" in sd[index]) {
      s = {
        value: sd[index].id,
        label: sd[index].cateName,
        children: [],
      };
      ds(sd[index].children, s.children);
    } else {
      s = {
        value: sd[index].id,
        label: sd[index].cateName,
      };
    }
    schid.push(s);
  }
};


</script>

<style lang="less" scope>
.box-card {
  width: 100%;
}
</style>
